<!DOCTYPE html>
<html lang="en">
	<head>
		<script src="https://unpkg.com/redux@4.0.5/dist/redux.js"></script>
	</head>
	<body>
		<div id="root">
			<button id="decrement">-</button>
			<span id="count">0</span>
			<button id="increment">+</button>
		</div>

		<script>
			// 1.定义reducer函数
			// 作用：根据不同的action对象，返回不同的新的state对象
			/**
			 * @param {*} state 管理的数据初始状态
			 * @param {*} action 对象type，用来标记当前想要做什么样的修改
			 * @returns 根据传入的action.type值，返回一个新的状态
			 */
			function reducer(state = { count: 0 }, action) {
				// 数据不可变：必须基于原始的状态生成一个新的状态
				if (action.type === "INCREMENT") {
					return { count: state.count + 1 }
				} else if (action.type === "DECREMENT") {
					return { count: state.count - 1 }
				} else {
					return state
				}
			}

			// 2.使用reducer函数生成store实例
			const store = Redux.createStore(reducer)

			// 3.通过store实例的subscribe订阅数据变化
			// 回调函数可以在每次state发生变化的时候自动执行
			store.subscribe(() => {
				console.log("state变化了", store.getState())
				// 5.通过store实例的getState方法获取最新状态更新到视图中
				document.getElementById("count").innerText =
					store.getState().count
			})

			// 4.通过store实例的dispatch函数提交action更改状态
			const inBtn = document.getElementById("increment")
			inBtn.addEventListener("click", () => {
				// 增加
				store.dispatch({
					type: "INCREMENT",
				})
			})

			const deBtn = document.getElementById("decrement")
			deBtn.addEventListener("click", () => {
				// 减少
				store.dispatch({
					type: "DECREMENT",
				})
			})
		</script>
	</body>
</html>
